<template>
    <div class="login">
        <div class="login_form">
            <p>后台管理系统</p>
            <el-form ref="loginFormRef" :model="loginForm" size="large" :rules="rules">
                <el-form-item label="" prop="account">
                    <el-input type="text" autocomplete="off" v-model="loginForm.account" prefix-icon="UserFilled"
                        placeholder="请输入用户名"></el-input>
                </el-form-item>
                <el-form-item label="" prop="password">
                    <el-input type="password" autocomplete="off" v-model="loginForm.password" prefix-icon="Lock"
                        placeholder="请输入密码"></el-input>
                </el-form-item>
                <el-form-item label="" prop="code">
                    <el-row :gutter="20">
                        <el-col :span="12"><el-input type="tex" autocomplete="off" v-model="loginForm.code"
                                prefix-icon="Message" placeholder="请输入验证码"></el-input></el-col>
                        <el-col :span="12"><img src="@/assets/login/code.png" /></el-col>
                    </el-row>
                </el-form-item>
                <el-form-item class="btns">
                    <el-button type="primary" @click="onSubmit(loginFormRef)">登录</el-button>
                    <el-button>重置</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>
<script setup>
import { reactive, ref } from "vue";
import { useRouter } from "vue-router";
import { login } from "@/api/login";

const loginFormRef = ref();
const loginForm = reactive({
    account: "",
    password: "",
    code: "",
});
const router = useRouter();
function onSubmit(elForm) {
    if (!elForm) {
        console.log("=============>> form对象不存在");
        return;
    }
    elForm.validate((result, fields) => {
        if (result) {
            // login(loginForm).then((data) => {
            //   console.log("data=========>>", data);
            // });
            router.push("/main");
        } else {
            loginForm.account = "fdafsdfds";
        }
    });

}
const rules = reactive({
    account: [{ required: true, message: "用户名不能为空", trigger: "change" }],
    password: [{ required: true, message: "密码不能为空", trigger: "change" }],
    code: [
        { required: true, message: "验证码不能为空", trigger: "blur" },
        { min: 4, max: 4, message: "验证码长度为4个字符", trigger: "blur" },
    ],
});
</script>
<style scoped lang="scss">
.login {
    width: 100%;
    height: 100%;
    background-image: url("@/assets/login/background.jpeg");
    .login_form {
        width: 400px;
        height: 360px;
        position: absolute;
        left: 78%;
        top: 50%;
        margin-left: -200px;
        margin-top: -150px;
        padding: 10px;
        background: #fff;
        border-radius: 10px;
        box-shadow: 0 0 10px #ddd;
        .btns {
            .el-form-item__content {
                justify-content: flex-end;
            }
        }
    }

    p {
        font-size: 24px;
        text-align: center;
        font-weight: 600;
    }
}
</style>